<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" align="center" class="clearfix">
            <span>个人基本信息</span>

          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">
                  <span v-if="user.email">{{ user.email }}</span>
                  <span v-else>未填写</span>
                </div>
              </li>
              <!-- 性别 -->
              <li class="list-group-item">
                <svg-icon icon-class="people" />性别
                <div class="pull-right">
                  <span v-if="user.sex == 0">男</span>
                  <span v-else-if="user.sex == 1">女</span>
                  <span v-else="user.sex==2">未选择</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>个人资料</span>
            <el-tooltip class="item" effect="dark" :content="text" placement="top">
              <el-button style="margin-left: 500px;">购买信息填写建议</el-button>
            </el-tooltip>
            <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" :percentage="percentage" ref="userInfo" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :percentage="percentage" ref="resetPwd" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="身份信息" name="userDetail">
              <userDetail :user="user" :percentage="percentage" ref="userDetail" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="银行卡信息" name="userBankCard">
              <userBankCard :user="user" :percentage="percentage" ref="userBankCard" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="工作信息" name="userOccupation">
              <userOccupation :user="user" :percentage="percentage" ref="userOccupation" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="住址信息" name="userAddress">
              <userAddress :user="user" :percentage="percentage" ref="userAddress" @increase="increase" />
            </el-tab-pane>
            <el-tab-pane label="紧急联系人信息" name="userEmergency">
              <userEmergency :user="user" :percentage="percentage" ref="userEmergency" @increase="increase" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";

import userDetail from "./userDetail/userDetail.vue";
import userBankCard from "./userDetail/userBankCard.vue";
import userOccupation from "./userDetail/userOccupation.vue";
import userAddress from "./userDetail/userAddress.vue";
import userEmergency from "./userDetail/userEmergency.vue";

import { getUserProfile } from "@/api/system/user";
import { getUserDetail } from "@/api/credit/creUser";
import { number } from "echarts/lib/export";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd, userDetail, userBankCard, userOccupation, userAddress, userEmergency, getUserDetail },
  data() {
    return {
      // 提示信息
      text:'邮箱，身份证，银行卡号,真实姓名，紧急联系电话必填\
      建议：信息越多，申请贷款成功率越高哦',
      // 进度条
      percentage: 0,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      detail: {},
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        console.log(this.user)
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
        this.findUserDetail()
      });
    },
    findUserDetail() {
      console.log(this.user.userId);
      getUserDetail(this.user.userId).then(res => {
        console.log(res);
        // this.detail=res.
        this.detail = res.data
        console.log(this.detail);
        this.percentageInitialization()
      }).catch()
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    increase(percentage) {
      this.findUserDetail()
      console.log(this.percentage);
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
    // 进度条更改
    percentageInitialization() {
      this.percentage = 0
      if (this.user.phonenumber) {
        this.percentage += 5
      }
      if (this.user.email) {
        this.percentage += 5
      }
      if (this.user.sex != "2") {
        this.percentage += 5
      }
      if (this.detail.realName) {
        this.percentage += 5
      }
      if (this.detail.identityCard) {
        this.percentage += 5
      }
      if (this.detail.educationLevel) {
        this.percentage += 5
      }
      if (this.detail.bankCard) {
        this.percentage += 5
      }
      if (this.detail.occupation) {
        this.percentage += 5
      }
      if (this.detail.monthIncome) {
        this.percentage += 5
      }
      if (this.detail.address) {
        this.percentage += 5
      }
      if (this.detail.houseCertificate) {
        this.percentage += 5
      }
      if (this.detail.emergencyPhone) {
        this.percentage += 5
      }
      if (this.detail.password) {
        this.percentage += 5
      }
      if (this.user.userName) {
        this.percentage += 5
      }
      console.log(this.percentage);
    }
  },
  watch: {
    percentage: function (newData, oldData) {
      console.log(oldData, newData);
      this.findUserDetail()
    }
  },
};
</script>
